<!--
 * @Author: C.
 * @Date: 2021-07-12 19:42:41
 * @LastEditTime: 2021-09-07 10:27:49
 * @Description: file content
-->
<template>
  <div :class="prefixCls">
    <div class="print-wrapper">
      <div class="print-wrapper-body" :style="getPageStyle" ref="printTarget">
        <table style="width: 100%">
          <thead>
            <th>
              <PrintBlock name="header" />
            </th>
          </thead>

          <tbody>
            <tr>
              <td style="position: relative">
                <div><PrintBlock name="body" /></div>
              </td>
            </tr>
            <tr>
              <td>
                <!-- 表格 -->
                <PrintTable />
              </td>
            </tr>
            <tr>
              <td style="position: relative">
                <PrintBlock name="footer" />
              </td>
            </tr>
          </tbody>
          <tfoot>
            <th style="width: 100%; height: 50px"></th>
          </tfoot>
        </table>
      </div>
    </div>
    <div class="print-setting"> <PrintSetting /></div>
    <div v-html="styleText"></div>
  </div>
</template>
<script lang="ts">
  import { computed, defineComponent } from 'vue';
  import PrintBlock from './cpn/PrintBlock/index.vue';
  import PrintTable from './cpn/PrintTable/index.vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  import PrintSetting from './cpn/PrintSetting/index.vue';
  import { usePrintStore } from '/@/store/modules/print';
  import { paperMap } from '/@/views/print/src/maps';
  export default defineComponent({
    components: { PrintBlock, PrintSetting, PrintTable },
    setup() {
      const { prefixCls } = useDesign('print-dev');
      let paperStyle = usePrintStore().printTemplate.paperStyle;
      let getPageStyle = computed(() => {
        return paperStyle.direction == 'portrait'
          ? {
              width: paperMap[paperStyle.paperType].width + 'mm',
              height: paperMap[paperStyle.paperType].height + 'mm',
            }
          : {
              height: paperMap[paperStyle.paperType].width + 'mm',
              width: paperMap[paperStyle.paperType].height + 'mm',
            };
      });
      function styleText() {
        return `<style type="text/css" media="print">  @page { size: ${paperStyle.paperType} ${paperStyle.direction}}; }</style>`;
      }
      return {
        prefixCls,
        getPageStyle,
        styleText,
      };
    },
  });
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-print-dev';
  .@{prefix-cls} {
    @import '../../styles/print.less';

    background: @outer-bgc;
    width: 100%;
    height: 100%;
  }
</style>
